<template>
  <div class="noticeReleased">
    <el-card shadow="never" style="margin-top: 30px">
      <div class="header">
        <div class="page-header">
          <el-page-header @back="goBack" content="已发布公告" style="margin-bottom: 20px">
          </el-page-header>
        </div>
      </div>

      <el-table
          :data="noticeTable"
          style="width: 100%"
          highlight-current-row
          stripe
          @row-click="toNoticeDetails"
          >
        <el-table-column
            label="序号"
            type="index"
            width="100px"
            :index="indexMethod">
        </el-table-column>
        <el-table-column
            prop="noticeTitle"
            label="标题"
            width="200px">
        </el-table-column>
        <el-table-column
            prop="noticeDigest"
            label="摘要"
            width="500px">
        </el-table-column>
        <el-table-column
            prop="annceTime"
            label="发布时间"
            width="200px"
            sortable>
          <template slot-scope="scope">
            {{shortTime(scope.row.annceTime)}}
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="padding: 10px 0">
        <el-pagination
            :page-sizes="[2, 5, 10, 20]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total
            :current-page=this.pageNum
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>

    </el-card>
  </div>
</template>

<script>
import {getNoticeByPage} from "@/api/allApi";
import {shortTime} from "../../../../utils/timeFormat";
export default {
  name: "NoticeReleased",
  data() {
    return{

      noticeTable:[],
      pageSize:5,
      total:0,
      pageNum:1,
    }
  },
  computed: {

  },
  methods:{
    shortTime,
    //获取序号
    indexMethod(index) {
      // 当前页数 - 1 * 每页数据条数 + 1
      const page = this.pageNum // 当前页码
      const pagesize = this.pageSize // 每页条数
      return index + 1 + (page - 1) * pagesize
    },


    goBack() {
      this.$router.back();
    },
    getNoticeByPage() {
      getNoticeByPage({
        current:this.pageNum,
        pageSize:this.pageSize
      }).then(res=>{
        this.noticeTable = res.data.data
        this.total = res.data.total
        for (let i = 0; i < this.noticeTable.length; i++) {
          this.noticeTable[i].noticeDigest = (String)(this.noticeTable[i].noticeDigest).substring(0,80)
        }
      })


    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize;
      this.getNoticeByPage();
    },
    handleCurrentChange(pageNum){
      this.pageNum=pageNum;
      this.getNoticeByPage();
    },

    toNoticeDetails(row, event, column) {
      this.$router.push({
        path: "/adminLayout/adminBackground/noticeDetail/"+row.noticeId,
        params: {
          noticeId: row.noticeId,
        },
      });
    }
  },
  mounted() {
    this.html = this.noticeTable.noticeContent
    this.getNoticeByPage()
  },
}
</script>

<style scoped>

</style>